<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>404 Not Found - CarbonTrack</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  <!-- iOS Design CSS -->
  <link rel="stylesheet" href="./css/ios-design.css">
  <link rel="stylesheet" href="./css/index.css">
   <!-- Font Awesome for icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <style>
    body {
      /* Use CSS variables */
      background-color: var(--ios-secondary-system-background, #f2f2f7);
      color: var(--ios-label, #000);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 16px; /* Slightly larger base font */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      text-align: center;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Dark theme styles */
    body.dark-theme {
      background-color: var(--ios-system-background-dark, #000);
      color: var(--ios-label-dark, #fff);
    }

    .error-container {
        max-width: 600px;
    }

    .error-code {
      font-size: clamp(4rem, 20vw, 8rem); /* Responsive font size */
      font-weight: 700;
      color: var(--ios-red, #ff3b30); /* Use theme red */
      margin-bottom: 10px;
      line-height: 1;
      transition: color 0.3s ease;
    }
     /* Optional: different red for dark? */
     /* body.dark-theme .error-code { color: var(--ios-red-dark, #ff453a); } */

    h3 {
      font-size: clamp(1.2rem, 5vw, 1.8rem); /* Responsive font size */
      color: var(--ios-secondary-label, #3c3c43); /* Use secondary label color */
      font-weight: 500; /* Medium weight */
      margin-bottom: 10px;
      transition: color 0.3s ease;
    }
     body.dark-theme h3 {
         color: var(--ios-secondary-label-dark, #ebebf599);
     }

    a.home-link {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        background-color: var(--ios-blue);
        color: white;
        text-decoration: none;
        border-radius: 10px;
        font-weight: 600;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    a.home-link:hover {
        background-color: var(--ios-blue-darker, #0056b3); /* Darker blue on hover */
        transform: scale(1.05);
    }
     /* Optional: dark mode link style */
     /* body.dark-theme a.home-link { background-color: var(--ios-blue-dark); } */
     /* body.dark-theme a.home-link:hover { background-color: var(--ios-blue-dark-darker); } */

    /* Theme Toggle Button Styles (using ios-design.css variables) */
    #theme-toggle-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: var(--ios-tertiary-system-background);
      color: var(--ios-secondary-label);
      border: 1px solid var(--ios-separator);
      border-radius: 50%;
      width: 45px;
      height: 45px;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1050; /* Ensure it's above other elements */
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    body.dark-theme #theme-toggle-button {
      background-color: var(--ios-tertiary-system-background-dark);
      color: var(--ios-secondary-label-dark);
      border: 1px solid var(--ios-separator-dark);
      box-shadow: 0 2px 5px rgba(255,255,255,0.1);
    }

     #theme-toggle-button:hover {
        transform: scale(1.05);
        opacity: 0.9;
     }

  </style>
</head>
<body class="auto-theme"> <!-- Start with auto-theme -->

<!-- Theme Toggle Button -->
<button id="theme-toggle-button" aria-label="Toggle theme">
  <i class="fas fa-sun"></i> <!-- Default icon -->
</button>

<div class="error-container">
    <h1 class="error-code">404</h1>
    <h3>页面未找到</h3>
    <h3>The page you requested could not be found.</h3>
    <a href="/" class="home-link">返回首页 (Return Home)</a>
</div>

<script>
  // Theme toggling logic (Standard implementation)
  const themeToggleButton = document.getElementById('theme-toggle-button');
  const currentTheme = localStorage.getItem('theme') || 'auto'; // Default to 'auto'

  function applyTheme(theme) {
    const body = document.body;
    const icon = themeToggleButton.querySelector('i');
    body.classList.remove('light-theme', 'dark-theme'); // Remove existing theme classes

    if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      body.classList.add('dark-theme');
      icon.className = 'fas fa-moon'; // Moon icon for dark
    } else {
      body.classList.add('light-theme'); // Explicitly add light-theme or rely on default
      icon.className = 'fas fa-sun'; // Sun icon for light
    }
    localStorage.setItem('theme', theme);

     // Update icon for auto based on effective theme
    if (theme === 'auto') {
        icon.className = 'fas fa-adjust'; // Use adjust icon for auto
    }
  }

  function cycleTheme() {
    const themes = ['light', 'dark', 'auto'];
    let currentThemeIndex = themes.indexOf(localStorage.getItem('theme') || 'auto');
    let nextThemeIndex = (currentThemeIndex + 1) % themes.length;
    applyTheme(themes[nextThemeIndex]);
  }

  // Apply initial theme on load
  applyTheme(currentTheme);

  // Listen for system theme changes if in 'auto' mode
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    if (localStorage.getItem('theme') === 'auto') {
      applyTheme('auto');
    }
  });

  // Add event listener to the button
  themeToggleButton.addEventListener('click', cycleTheme);
</script>

</body>
</html>
